<template>
	<view style="display: flex;flex-direction: column;background-color: #FFFFFF;">
		<view :class="isShowTitle?'top-group-native':'top-group-view'">
			<view @click="backClick()" class="top-title-view" :style="'height: '+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<image class="back-img-view" :src="isShowTitle?'../../static/login/icon_back.png':'../../static/selection/icon_back_white.png'"></image>
				<text class="title-text" v-if="isShowTitle">爆品榜单</text>
			</view>
		</view>
		<view style="position: relative;">
			<image class="bg-img-view" :src="baseImageUrl + '/main/img_emplosives_bg1.png'"></image>
			<view style="display: flex;flex-direction: column;position: absolute;width: 100vw;">
				<view style="height:247px;"></view>
				<f-sticky :scrollTop="scrollTop" :offsetTop="offsetTop">
					<view class="tab-group-view" :style="!isShowTitle?'border-radius:16px 16px 0px 0px':''">
						<scroll-view class="tab" scroll-x="true"  :scroll-left="scrollLeft" >
							<block v-for="(item,index) in tabData" :key="index" >
								<!-- 标签动态样式 -->
								<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
									{{item.name}}
								</view>
							</block>
						</scroll-view>
					</view>
				</f-sticky>
				<view style="background-color: #FFFFFF;">
					<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @up="upCallback" :height="700">
						<view v-for="(item, index) in goodsList" :key="index" :id="index">
							<uni-explosives-item :goodsInfo="item" @onItemClick="onItemClick"></uni-explosives-item>
						</view>
					</mescroll-body>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrls from '@/common/config.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import fSticky from '@/components/f-sticky/f-sticky';
	import uniExplosivesItem from '@/components/uni-home/uni-explosives-item.vue';
	export default {
		mixins: [MescrollMixin], 
		components: {
			fSticky,
			uniExplosivesItem
		},
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				navHeight: 0,
				scrollTop :0,
				offsetTop: 0,
				isShowTitle: false,
				scrollHeight: 0,
				tabData:[
					{id:0,name:"实时榜",value:"0"},
					{id:1,name:"今日销量榜",value:"1"},
					{id:2,name:"7日销量榜",value:"2"},
					{id:3,name:"30日销量榜",value:"3"},
					{id:4,name:"总销量榜",value:"4"},
				],
				currentTab: 0,
				scrollLeft: 0,
				windowWidth: 0,
				chooseType: '0',
				goodsList: [],
				upOption:{
					noMoreSize: 10,
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有爆品', 
					},
					textNoMore: '~ 没有更多爆品 ~'
				},
				downOption: {
					native: true,
				},
				isPullDownRefresh: false,
			}
		},
		onReady() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
			this.navHeight = this.iStatusBarHeight + this.navigationBarHeight;
			this.offsetTop = this.navHeight * 2;
			this.scrollHeight = 266 - this.navHeight;
		},
		onLoad() {
			wx.getSystemInfo({
				success: (res) => {	
					this.windowWidth = res.windowWidth;
				}
			});
		},
		methods: {
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getSelectionList, {
					page: page.num,
					limit: 10,
					isHotProduct: true,
					salesType: that.chooseType
				}).then(res => {
					if (that.isPullDownRefresh) {
						that.isPullDownRefresh = false;
						uni.stopPullDownRefresh();
					}
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.goodsList = []; 
						that.goodsList=that.goodsList.concat(respData);
					} else {
						that.goodsList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			onPullDownRefresh: function() {
				this.isPullDownRefresh = true;
				this.mescroll.resetUpScroll();
			},
			clickTab(e) {
				let clickIndex = e.target.dataset.current;			
				let singleNavWidth = (this.windowWidth - 16) / 5;  		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth;
				this.currentTab = clickIndex;
				this.chooseType = this.tabData[clickIndex].value;
				this.mescroll.resetUpScroll();
			},
			backClick() {
				uni.navigateBack({
					delta:1
				});
			},
			onItemClick(id) {
				uni.navigateTo({
					url:'/subpages/pages/selectionDetail?goodsId='+id
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop >= this.scrollHeight) {
				this.isShowTitle = true;
			} else {
				this.isShowTitle = false;
			}
		}
	}
</script>

<style>
	@import url("../../css/main/explosives.css");
</style>
